<template>
  <div>
    <el-drawer
      :visible.sync="action"
      direction="rtl"
      :title="title"
      size="50%"
      class="drawer"
    >
      <el-drawer
        title="转交指派"
        :append-to-body="true"
        size="40%"
        :close-on-press-escape="false"
        :visible.sync="shareMain">
        <div class="filter-container" style="padding:0 20px;">
          <div class="warning">
            <p><a href="javascript:;">转交 </a>和<a href="javascript:;"> 指派 </a>可同时选择，被指派人不在转交区域内也可以看到。</p>
            <p><a href="javascript:;">转交 </a>和<a href="javascript:;"> 指派 </a>后会重新计算截止时间。</p>
          </div>
          <div class="shareMain">
            <div class="label">转交至：</div>
            <div class="select">
              <el-cascader :options="baseData.leaderInfo" class="filter-item w-200" style="width:300px" clearable
                           filterable
                           placeholder="选择责任人" :props="{ expandTrigger: 'hover' }" v-model="shareParms.leader"
              ></el-cascader>
            </div>
          </div>
          <div class="shareMain">
            <div class="label">指派给：</div>
            <div class="select">
              <el-select
                v-model="shareParms.actionUid"
                filterable
                @change="actionUidcheck"
                remote
                placeholder="请输入关键词"
                :remote-method="remoteMethod"
                :loading="actionUidloading">
                <el-option
                  v-for="(item,idx) in actionUidData"
                  :key="item.id"
                  :label="item.user_name"
                  :value="item.id">
                  <div>
                    <p style="color:#20a0ff;font-weight: bold">{{ item.user_name }}</p>
                    <p style="color: #999; font-size: 12px;">{{ item.user_verify }}</p>
                  </div>
                </el-option>
              </el-select>

            </div>
          </div>
          <div class="shareMain" style="width:500px;align-items: flex-start">
            <div class="label">指派理由：</div>
            <div class="select">
              <el-input type="textarea" rows="3" v-model="shareParms.actionUidreason" style="width:100%;"
                        placeholder="非必填"></el-input>
            </div>
          </div>

          <div class="shareMain">
            <div class="label"></div>
            <div class="select">
              <el-button type="primary" @click="onSubmit" style="width:150px;">提交</el-button>
            </div>
          </div>
        </div>
      </el-drawer>
      <div v-loading="actionloading" style="padding:0 30px;min-height:70vh">
        <div v-if="actionData.wid">
          <div class="titleH">
            <a class="title" :href="`https://wz.mala.cn/wz/wzinfo?wid=${actionData.wid}`" target="_blank"><i
              class="el-icon-link"
            ></i> {{ actionData.title }}</a>
          </div>
          <el-descriptions class="margin-top" :column="3" border style="margin-top:20px;">
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                发帖人
              </template>
              {{ actionData.u_name }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-time"></i>
                时间
              </template>
              {{ actionData.create_time }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-files"></i>
                分类
              </template>
              {{ actionData.type }}
            </el-descriptions-item>
            <el-descriptions-item v-if="actionData.phone">
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                手机
              </template>
              {{ actionData.phone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-star-on"></i>
                评分
              </template>

              <el-rate v-model="actionData.evaluate_all" disabled text-color="#ff9900"
                       v-if="actionData.evaluate_all>0"></el-rate>
              <span v-else>尚未评分</span>

            </el-descriptions-item>
          </el-descriptions>


          <div class="contentBox">
            <div class="h">
              留言和回复
              <div class="re-reply" v-if="type==2">
              </div>
            </div>
            <div v-html="actionData.content" class="wzdataContent" ref="ContentBox">
            </div>
            <div v-if="actionData.image &&actionData.image.length" style="margin-top:10px;">

              <div class="image__preview">
                <el-image
                  style="width: 100px; height: 100px;object-fit: cover;margin-right:10px;"
                  :src="item"
                  v-for="(item,idx) in actionData.image"
                  :preview-src-list="actionData.image"
                >
                </el-image>
              </div>
            </div>


            <div class="actionList">

              <div class="actionLabel">
                <div class="icon">
                  <i class="iconfont icon-huifu"></i>
                </div>
                <div class="actionMain">
                  <div class="p">该留言将成功办结，请点击此按钮前往回复。</div>
                  <el-button
                    size="small"
                    type="primary"
                    style="width:110px;"
                  >
                    立即回复
                  </el-button>
                </div>
              </div>


              <div class="actionLabel" v-if="actionData.status==2">
                <div class="icon">
                  <i class="iconfont icon-shijian"></i>
                </div>
                <div class="actionMain">
                  <div class="p">该留言正在调查/办理中，请点击此按钮。</div>
                  <el-popconfirm
                    title="你确认受理此件吗？受理后页面将会显示你的单位名字"
                  >
                    <el-button slot="reference" size="small" type="primary">立即受理</el-button>
                  </el-popconfirm>
                </div>
              </div>


              <div class="actionLabel" @click="ref">
                <div class="icon">
                  <i class="iconfont icon-fenxiang"></i>
                </div>
                <div class="actionMain">
                  <div class="p">将此留言件转交给某区域或指派给具体单位，请点此按钮。</div>
                  <el-button
                    size="small"
                    type="primary"
                    style="width:110px;"
                  >
                    立即转交/指派
                  </el-button>
                </div>
              </div>

            </div>


            <div v-if="actionData.reply && actionData.reply.length>0" class="reply">
              <div class="reply-item"
                   v-for="(item,idx) in actionData.reply"
              >
                <div class="headerLine">
                  <div class="reply-user">
                      <span class="user">
                        <span v-if="item.delete_time>0" class="delete">已删除</span>
                           {{ item.user_name || item.user_verify }}
                      </span>
                    <span class="t">{{ item.create_time }}</span>
                  </div>
                </div>
                <div v-html="item.l_reply" style="padding-top:5px;color:#666;line-height: 25px;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<style lang="less">
.re-replyBox {
  .el-upload--picture-card {
    width: 90px;
    height: 90px;
    line-height: 90px;
  }
}

</style>
<style scoped lang="less">
.el-select-dropdown__item {
  height: auto;
  line-height: auto;
  padding: 8px 13px;

  p {
    line-height: 20px;
    margin: 0;
  }
}

.shareMain {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .label {
    width: 100px;
    font-size: 15px;
    text-align: right;
  }

  .select {
    width: calc(100% - 100px);
  }
}

.re-replyBox {
  padding: 20px;
}

.actionList {
  border-bottom: 1px solid #ddd;
  margin: 20px 0;
  display: flex;
  padding-bottom: 20px;

  .actionLabel {
    transition: .3s all;
    color: #409EFF;
    margin-right: 30px;
    background: #ecf5ff;
    border: 1px solid #b3d8ff;
    width: 280px;
    padding: 15px 10px;
    display: flex;
    border-radius: 5px;
    cursor: pointer;

    &:hover {
      transform: translateY(-5px);
    }

    .actionMain {
      margin-left: 10px;

      .p {
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 20px;
        color: #888;
      }
    }

    .name {
      font-weight: bold;
      font-size: 18px;
    }

    .iconfont {
      font-size: 40px;
    }
  }
}

.reply-item {
  color: #409EFF;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
  padding: 15px;
  margin: 10px 0;
  border-radius: 5px;

  &.delete_item {
    color: #999;
    border-color: #ddd;
    background-color: #eee;

    .headerLine {
      border-bottom: 1px solid #ddd !important;
    }
  }

  .headerLine {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #c6e2ff;

    .actionButton {
      cursor: pointer;
    }
  }

  .reply-user {
    font-weight: bold;
    padding-bottom: 5px;
    display: flex;


    .user .delete {
      background: red;
      color: #fff;
      padding: 2px 5px;
      margin-right: 5px;
      border-radius: 5px;
    }

    .t {
      font-weight: normal;
      color: #999;
      margin-left: 30px;
    }
  }
}

.titleH {
  .title {
    color: #20a0ff;
    font-size: 22px;
    font-weight: bold;

    &:hover {
      color: #369;
    }
  }
}

.contentBox {
  margin: 20px 0;
  background: #fff;

  .h {
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    color: #20a0ff;
    padding-left: 10px;
    position: relative;

    .re-reply {
      position: absolute;
      right: 0;
      top: -6px;
    }

    &:after {
      content: "";
      position: absolute;
      top: -2px;
      width: 3px;
      background: #20a0ff;
      height: 20px;
      left: 0;
    }
  }

  .wzdataContent {
    margin-top: 10px;
    font-size: 15px !important;
    line-height: 27px;
  }

  .reply-item {
    font-size: 14px !important;
  }
}

</style>
<script>

import {getWzInfo, getWzParams, passonSave} from "@/api/wz";
import {getSearchUser} from "@/api/user";

export default {
  name: 'Listaction',
  props: {
    type: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: '查看留言'
    }
  },
  data() {
    return {
      rereply: false,
      form: {
        reply: '',
      },
      actionUidloading: false,
      actionUidData: [],
      shareParms: {
        leader: [],
        actionUid: '',
        actionUidreason: '',
      },
      baseData: [],
      shareMain: false,
      formLoading: false,
      action: false,
      activeNames: ["1", "2"],
      actionloading: true,
      actionData: [],
    }
  },
  created() {
    this.WzParams()
  },
  methods: {
    actionUidcheck(a) {

    },
    ref() {
      this.shareMain = true;
      this.actionUidData = [];
      this.shareParms = {
        leader: [],
        actionUid: '',
        actionUidreason: '',
      }
    },
    onSubmit() {
      console.log(this.shareParms)
      passonSave({wid:this.actionData.wid,...this.shareParms}).then(r => {
        this.$message.success('转交成功');
      })
    },
    remoteMethod(query) {
      if (query !== '') {
        this.actionUidloading = true;
        getSearchUser({query: query}).then(response => {
          this.actionUidData = response.data
          this.actionUidloading = false;
        })
      } else {
        this.actionUidData = [];
      }
    },
    WzParams() {
      let baseData = localStorage.getItem('wzbaseData')
      if (!baseData) {
        getWzParams().then(response => {
          this.baseData = response.data
          localStorage.setItem('wzbaseData', JSON.stringify(this.baseData))
        })
      } else {
        this.baseData = JSON.parse(baseData)
      }
    },
    doPostReply() {
      //二次回复
      this.formLoading = true
    },
    doPostReplyCancel() {
      this.rereply = false
    },
    doRereply() {
      this.rereply = true
    },
    openAction(wid) {
      this.form = {
        reply: ''
      }
      this.actionloading = true
      this.actionData = []
      getWzInfo({wid: wid}).then(r => {
        this.actionloading = false
        this.actionData = r.data
      })
      this.action = true
    }
  }
}
</script>
